<template>
<div class="REcontain">
  <div class="REtop">
    <div class="REcarousel">
      <el-carousel :interval="4000" type="card" height="300px" style="width: 90%;margin: 0 auto" v-if="recrulist.length>0">
        <el-carousel-item v-for="(item,index) in recrulist" :key="index" >
          <img :src="item.img" alt="" style="width: 100%;height: 100%"/>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div style="min-height: 20px;width: 100%"></div>
    <div class="REinstruct">
      <div class="card">
        <div class="icon">
          <div>1</div>
        </div>
        <strong> 驾校背景
        </strong>
        <div class="card__body">
          Driving school background.
        </div>
        <span>
          <el-carousel height="150px" trigger="click" direction="vertical" :autoplay="false" v-if="recrulist.length>0">
            <el-carousel-item v-for="(item,index) in recrulist" :key="index">
              <h3 class="small justify-center" text="2xl">{{ item.background }}</h3>
            </el-carousel-item>
          </el-carousel>
        </span>
      </div>
      <div class="card isdisplay">
        <div class="icon">
          <div>2</div>
        </div>
        <strong> 驾校文化
        </strong>
        <div class="card__body">
          Driving school culture.
        </div>
        <span>
          <el-carousel height="150px" trigger="click" direction="vertical" :autoplay="false" v-if="recrulist.length>0">
            <el-carousel-item v-for="(item,index) in recrulist" :key="index">
              <h3 class="small justify-center" text="2xl">{{ item.culture }}</h3>
            </el-carousel-item>
          </el-carousel>
        </span>
      </div>
      <div class="card">
        <div class="icon">
          <div>3</div>
        </div>
        <strong> 驾校资源
        </strong>
        <div class="card__body">
          Driving school resources.
        </div>
        <span>
          <el-carousel height="150px" trigger="click" direction="vertical" :autoplay="false" v-if="recrulist.length>0">
            <el-carousel-item v-for="(item,index) in recrulist" :key="index">
              <h3 class="small justify-center" text="2xl">{{ item.advertisement }}</h3>
            </el-carousel-item>
          </el-carousel>
        </span>
      </div>
    </div>
  </div>
  <div class="REbottom">
    <div class="REtittle">
      <div style="flex: 0.55">
        <img src="@/assets/svg/右前.svg" alt="" style="width: 200px;height: 200px;float: right"/>
      </div>
      <div style="flex: 0.3;margin: 20px;display: flex;flex-direction: column">
        学車啦平台助力每一名教练和学员，轻松实现互联网+、改善服务质量、提升教学效率、优化学车体验。
        <router-link to="/apply"><button class="recbut">立刻入住</button></router-link>
      </div>
      <div style="flex: 0.15"></div>
    </div>
    <div class="REcard">
      <div>
        <div style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) ;font-size: 36px;font-weight: 600;padding-bottom: 30px;margin-bottom: 0;line-height: 26px;font-style: italic;">
          <span>优秀</span>教练，学员</div>
      </div>
      <div>
        <div class="bastlist">
          <h4 style="min-height: 50px;font-weight: 500;font-size: 27px">优秀教练</h4>
          <div v-for="item in besttealist">
            <div style="border: 1px solid #e0e0e0;height: 120px;display: flex;margin: 10px 0" @click="zcoach">
              <h1 class="recruimg">
                <img src="~@/assets/img.webp" alt=""/></h1>
              <ul style="flex: 1;list-style-type: none;margin: 10px;line-height: 30px">
                <li>教练号：<span>{{item.id}}</span></li>
                <li>手机号：{{item.mobile}}</li>
                <li>综合评价：<el-rate
                    v-model="pjfvalue"
                    disabled
                    score-template="{value} points"
                /></li>
              </ul>
            </div>
          </div>
        </div>
        <div style="margin: 0 30px;"></div>
        <div class="bastlist">
          <h4 style="min-height: 50px;font-weight: 500;font-size: 27px">优秀学员</h4>
          <div v-for="item in beststulist">
            <div style="border: 1px solid #e0e0e0;height: 120px;display: flex;margin: 10px 0" @click="zstudent">
              <h1 class="recruimg">
                <img src="~@/assets/img.webp" alt="" style="width: 100%"/></h1>
              <ul style="flex: 1;list-style-type: none;margin: 10px;line-height: 30px">
                <li>学员号：<span>{{item.userId}}</span><div style="float: right">教练：{{item.coachId}}</div></li>
                <li>科目平均<span>100</span>分</li>
                <li>手机号：{{item.mobile}}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>

<script setup>
import { ref} from "vue";
import router from "@/router";
import {useStore} from "vuex";
import {getBestStudent} from "@/api/student";
import {ElMessage} from "element-plus";
import {getBestTeacher} from "@/api/teacher";
import {getAllRecruitment} from "@/api/recruitment";
const store = useStore()

const testlist = ref({})
const besttealist = ref({})
const beststulist = ref({})
const pjfvalue = ref(5)

const recrulist = ref({})
const recruthree = ref({})


getBestStudent().then(res=>{
    if (res.code === 20041){
      beststulist.value = res.data
    }else {
      ElMessage({
        message: '获取信息失败',
        type: 'error',
      })
    }
  })
  getBestTeacher().then(res=>{
    if (res.code === 20041){
      besttealist.value = res.data
    }else {
      ElMessage({
        message: '获取信息失败',
        type: 'error',
      })
    }
  })
  getAllRecruitment().then(res=>{
    if (res.code === 20041){
      recrulist.value = res.data
      recruthree.value = recrulist.value[0]
    }else {
      ElMessage({
        message: '获取信息失败',
        type: 'error',
      })
    }
  })

const zcoach = () =>{
  router.replace('/findcoach')
}
const zstudent = () =>{
  router.replace('/carstudent')
}

</script>

<style scoped>
@media screen and (min-width: 1088px){
  .recruimg{
    flex: 1;
    margin: 10px;
    overflow: hidden;
    max-width: 265px;
  }

}
@media screen and (max-width: 1088px){
  .card.isdisplay,
  .recruimg{
    display: none;
  }
}


.el-carousel__item {
  background-color: inherit;
  background-size: cover;
}

.REcontain{
  flex: 1;
  min-width: 1088px;
  overflow: auto;
  /*background-color: white;*/
}
.REtop{
  display: flex;
  height: 100%;
  min-height: 520px;
  flex-direction: column;
  /*border: 5px solid blue;*/
}
.REbottom{
  display: flex;
  height: auto;
  flex-direction: column;
  min-height: 400px;
  /*border: 10px solid #100505;*/
}
.REtittle{
  flex: 0.4;
  font-size: 14px;
  color: #000;
  display: flex;
  line-height: 35px;
  font-weight: 545;
  min-height: 200px;
  background-color: #ffd740;
  /*border: 2px solid #faf7c5;*/
}
.REcard{
  flex: 0.6;
  min-height: 500px;
  background-color: white;
  /*border: 2px solid red;*/

}
.REcard>div:first-child{
  height: 180px;
  margin: 0 10%;
  position: relative;
  /*border: 2px solid red;*/

}
.REcard>div:last-child{
  height: 500px;
  margin: 0 10%;
  display: flex;
  /*border: 2px solid red;*/

}
.REcard span{
  background: url("~@/assets/00.png") repeat-y;
  background-position-x: 0;
  background-position-y: 0;
  background-repeat: repeat-y;
  background-size: auto;
  padding: 0 10px;
  background-position: center 75%;
  background-repeat: no-repeat;
  background-size: contain;
}
.REcarousel{
  flex: 0.6;
  padding: 2px;
  box-sizing: border-box;
  min-height: 300px;
  /*border: 1px solid red;*/
}
.REinstruct{
  flex: 0.4;
  margin-top: 2px;
  min-height: 190px;
  display: flex;
  align-items: center;
  background-color: rgb(225, 225, 225,0.8);
  justify-content: space-evenly;
  /*border: 10px solid #4bb4b4;*/
}

.bastlist{
  flex: 0.5;
}
.bastlist>div{
  transition: box-shadow .2s ease;
}
.bastlist>div:hover{
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.12);
}

/* From uiverse.io by @Botwe-Felix5820 */
.recbut {
  margin-top: 10px;
  height: 60px;
  width: 180px;
  background: transparent;
  -webkit-animation: jello-horizontal 0.9s both;
  animation: jello-horizontal 0.9s both;
  border: 2px solid #831f1f;
  outline: none;
  font-weight: 700;
  color: #000000;
  font-size: 17px;
}

.recbut:hover {
  background: #100505;
  color: #ffffff;
  animation: squeeze3124 0.9s both;
}

@keyframes squeeze3124 {
  0% {
    transform: scale3d(1, 1, 1);
  }

  30% {
    transform: scale3d(1.25, 0.75, 1);
  }

  40% {
    transform: scale3d(0.75, 1.25, 1);
  }

  50% {
    transform: scale3d(1.15, 0.85, 1);
  }

  65% {
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    transform: scale3d(1.05, 0.95, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

/* From uiverse.io by @satyamchaudharydev */
.card {
  --bg: #f7f7f8;
  --hover-bg: #8cace8;
  --hover-text: #ffffff;
  min-width: 34ch;
  text-align: center;
  background: var(--bg);
  padding: 1.5em;
  padding-block: 1.8em;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  transition: .3s cubic-bezier(.6,.4,0,1),transform .15s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1em;
}

.card__body {
  color: #464853;
  line-height: 1.5em;
  font-size: 1em;
}

.card > :not(span) {
  transition: .3s cubic-bezier(.6,.4,0,1);
}

.card > strong {
  display: block;
  font-size: 1.4rem;
  letter-spacing: -.035em;
}

.card span {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /*display: flex;*/
  /*justify-content: center;*/
  /*align-items: center;*/
  color: var(--hover-text);
  border-radius: 5px;
  font-weight: bold;
  font-size: 14px !important;
  top: 100%;
  transition: all .3s cubic-bezier(.6,.4,0,1);
}

.card:hover span {
  top: 0;
  font-size: 1.2em;
}

.card:hover {
  background: var(--hover-bg);
}

.card:hover>div,.card:hover>strong {
  opacity: 0;
}
</style>